<template>
  <page-header-wrapper>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" class="table-head-ground">
          <div class="table-layer">
            <jeepay-text-up :placeholder="'红包名称'" :msg="searchData.name" v-model="searchData.name" />
            <a-form-item label="" class="table-head-layout" style="max-width:350px;min-width:300px">
              <a-range-picker
                @change="onChange"
                format="YYYY-MM-DD"
                :value="dateArr"
              >
                <a-icon slot="suffixIcon" type="sync" />
              </a-range-picker>
            </a-form-item>
            <span class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="queryFunc" :loading="btnLoading">搜索</a-button>
              <a-button style="margin-left: 8px" icon="reload" @click="() => {this.searchData = {};dateArr=null;}">重置</a-button>
            </span>
          </div>
        </a-form>
        <div>
          <a-button type="primary" icon="plus" @click="addFunc" class="mg-b-30">上传同金额兑换码</a-button>
        </div>
      </div>

      <!-- 列表渲染 -->
      <JeepayTable
        @btnLoadClose="btnLoading=false"
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="searchData"
        rowKey="id"
        :scrollX="1000"
      >
        <template slot="detail" slot-scope="{record}" :scroll="{ x: 200}">
            <div class="detailWid">
                <p>
                    <span>未领取数:{{record.notReceive}} </span>
                    <span>已领取数:{{record.receive}}</span>
                </p>
                <p>
                    <span>待审核数:{{record.waitApprove}} </span>
                     <span>已作废数:{{record.invalid}}</span>
                </p>
                <p>
                    <span>已拒绝数:{{record.refused}} </span>
                    <span>重复数:{{record.repeat}}</span>
                </p>
            </div>
        </template>
        <template slot="startTime" slot-scope="{record}">
          <p>{{record.startTime}}-{{record.endTime}}</p>
        </template>
        <template slot="status" slot-scope="{record}">
          <p v-if="record.status==0">关闭</p>
          <p v-else-if="record.status==1">开启</p>
          <p v-else-if="record.status==2">暂停</p>
          <p v-else>--</p>
        </template>
        <template slot="opSlot" slot-scope="{record}">  <!-- 操作列插槽 -->
          <JeepayTableColumns>
            <div style="padding: 0 10px">
              <a-button type="link" v-if="$access('ENT_PAY_ORDER_REFUND')" @click="editFunc(record.id,record)">编辑</a-button>
              <a-button type="link" v-if="$access('ENT_PAY_ORDER_VIEW')" @click="showPacketDetail(record.batchNo)">查看</a-button>
            </div>
          </JeepayTableColumns>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 导入  -->
    <MchPacketAdd ref="mchAppAddOrEdit" :callbackFunc="searchFunc"/>
    <PacketDetail ref="PacketDetail" />
  </page-header-wrapper>
</template>
<script>
import JeepayTextUp from '@/components/JeepayTextUp/JeepayTextUp' // 文字上移组件
import JeepayTable from '@/components/JeepayTable/JeepayTable'
import JeepayTableColumns from '@/components/JeepayTable/JeepayTableColumns'
import { API_ACTIVITYINFO_LIST, req } from '@/api/manage'
import MchPacketAdd from './AddOrEditPacket'
import PacketDetail from './PacketDetail'
// eslint-disable-next-line no-unused-vars
const tableColumns = [
  { key: 'id', title: 'id', dataIndex: 'id' },
  { key: 'name', title: '红包名称', dataIndex: 'name' },
  { key: 'amountSum', dataIndex: 'amountSum', title: '红包总额', customRender: (text) => '￥' + (text / 100).toFixed(2) },
  { key: 'amount', dataIndex: 'amount', title: '单个金额', customRender: (text) => '￥' + (text / 1).toFixed(2) },
  { key: 'packetCount', title: '红包数', dataIndex: 'packetCount' },
  { key: 'userLimit', title: '限制个数', dataIndex: 'userLimit' },
  { key: 'detail', title: '详情', scopedSlots: { customRender: 'detail' }, width:180 },
  { key: 'changeAmount', title: '已兑换金额', dataIndex: 'changeAmount', customRender: (text) => '￥' + (text / 100).toFixed(2) },
  { key: 'startTime', title: '开始时间-结束时间', scopedSlots: { customRender: 'startTime' },width:150 },
  { key: 'status', title: '状态', scopedSlots: { customRender: 'status' } },
  { key: 'op', title: '操作', width: '100px', fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }
]

export default {
  name: 'IsvListPage',
  components: { JeepayTable, JeepayTableColumns, JeepayTextUp, MchPacketAdd, PacketDetail },
  data () {
    return {
      btnLoading: false,
      tableColumns: tableColumns,
      searchData: {},
      startTime: '', // 选择开始时间
      endTime: '', // 选择结束时间
      visible: false,
      detailData: {},
      payWayList: [],
      searchData: {},
      dateArr:null
    }
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    // 请求table接口数据
    reqTableDataFunc: (params) => {
      return req.list(API_ACTIVITYINFO_LIST, params)
    },
    searchFunc: function () { // 点击【查询】按钮点击事件
      this.$refs.infoTable.refTable(true)
    },
    onClose () {
      this.visible = false
    },
    addFunc: function () { // 业务通用【新增】 函数
      this.$refs.mchAppAddOrEdit.show()
    },
    editFunc: function (id,item) { // 业务通用【修改】 函数
      this.$refs.mchAppAddOrEdit.show(id,item)
    },
    onChange (date, dateString) {
      this.dateArr = dateString
      this.searchData.startTime = dateString[0] // 开始时间
      this.searchData.endTime = dateString[1] // 结束时间
    },
    showPacketDetail: function (batchNo) { // 支付参数配置
      // this.$router.push({ path: '/packetOrder', query: { batchNo: batchNo } })
      this.$refs.PacketDetail.show(batchNo)
    },
    queryFunc () {
      this.btnLoading = true
      this.$refs.infoTable.refTable(true)
    },
  }
}
</script>
